<template>
	<view :style="[{paddingTop:CustomBar+'px'}]">
		<cu-custom bgColor="bg-colorP" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">流量收益</block>
		</cu-custom>
		<view class="show-head">
			<view class="truth-time">
				<view class="select-time">
					<view class="">
						<picker mode="date" :value="startTime" start="2018-01-01" :end="endDate" @change="startChange">
							<view class="picker" :class="startTime?'active':''">
								{{startTime?startTime:'开始时间'}}
							</view>
						</picker>
					</view>
					<view class="j_g">至</view>
					<view class="">
						<picker mode="date" :value="endTime" start="2018-01-01" :end="endDate" @change="endChange">
							<view class="picker text-colorP" :class="endTime?'active':''">
								{{endTime?endTime:'结束时间'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="search" @click="getData(1)">查询</view>
			</view>
			<view class="zoom-p">
				<text>总收益</text>
				<text>{{totalAmount}}</text>
			</view>
		</view>
		<tui-divider width="80%" :gradual="true" v-if='!noContent'>收益明细</tui-divider>
		<view class="list">
			<view class="item" v-for="(item,index) in showList" :key="index">
				<image :src="item.headimg" mode=""></image>
				<view class="">
					<view class="">
						<text class="text-cut">{{item.user_name}}</text>
						<text>{{item.create_time}}</text>
					</view>
					<view class="">
						+{{item.money}}
					</view>
				</view>
			</view>
		</view>
		<no-content :showType="'data'" v-if='noContent' :tips="'暂时还没有收益哦，快去发展店铺粉丝吧~'"></no-content>
	</view>
</template>

<script>
	import tuiModal from "@/components/thorUI/modal"
	import noContent from "./component/noContent"
	var untils = require('@/utils/util.js');
	export default {
		components: {
			tuiModal,
			noContent
		},
		data() {
			return {
				CustomBar: this.CustomBar,
				startTime: '',
				endTime: '',
				page: 1,
				showList: [],
				noContent: false,
				totalAmount: '',
				endDate:''
			}
		},
		onLoad() {
			var that = this
			var time = untils.formatDateTime(new Date().getTime())
			this.endDate = time.split(' ')[0]
			this.getData()
		},
		onReachBottom() {
			var that = this
			if (that.page > that.lastPage) {
				uni.showToast({
					title:'没有更多了~'
				})
				return
			}
			that.getData()
		},
		methods: {
			startChange(e) {
				this.startTime = e.detail.value
			},
			endChange(e) {
				this.endTime = e.detail.value
			},
			getData(status) {
				var that = this
				if (status) {
					if(!that.startTime){
						uni.showToast({
							title: '选择开始时间',
							icon: 'none'
						})
						return false
					}
					if(!that.endTime){
						uni.showToast({
							title: '选择结束时间',
							icon: 'none'
						})
						return false
					}
					if (that.startTime && that.endTime) {
						var startTime = new Date(that.startTime)
						var endTime = new Date(that.endTime)
						if (endTime - startTime < 0) {
							uni.showToast({
								title: '搜索时间范围有误',
								icon: 'none'
							})
							return false
						}
					}
					that.page = 1
					that.showList = []
				}
				that.noContent = false
				this.$request({
					url: '/FirstBusinessLog/get_log_list',
					data: {
						start_time: that.startTime,
						end_time: that.endTime,
						page: that.page
					},
					success: res => {
						if (res.data.status == 1) {
							if (!that.startTime && !that.endTime) {
								that.totalAmount = res.data.data.total_amount
							}
							var nList = res.data.data.data
							if (res.data.data.totalNum == 0) {
								that.noContent = true
							}
							that.showList = this.showList.concat(nList)
							that.page++
							that.lastPage = res.data.data.pageCount
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style scoped>
	.show-head {
		width: 100%;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		padding: 0 24rpx;
		background: #fff;
	}

	.show-head .truth-time {
		flex: 1;
		border-bottom: solid 1rpx #efefef;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.select-time {
		display: flex;
		align-items: center;
	}

	.select-time .picker {
		width: 200rpx;
		height: 56rpx;
		text-align: center;
		line-height: 56rpx;
		background: #f5f5f5;
		color: #999;
		font-size: 24rpx;
		border-radius: 28rpx;
	}

	.select-time .picker.active {
		color: #333333;
	}

	.select-time .j_g {
		color: #333333;
		font-size: 30rpx;
		margin: 0 20rpx
	}

	.search {
		width: 160rpx;
		height: 56rpx;
		background-color: #f34930;
		border-radius: 28rpx;
		color: #fff;
		text-align: center;
		line-height: 56rpx;
		font-size: 30rpx;
	}

	.show-head .zoom-p {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.show-head .zoom-p>text:nth-child(1) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.show-head .zoom-p>text:nth-child(2) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		font-weight: bold;
		color: #333333;
	}
	
	.list{
		
	}

	.item {
		width: 100%;
		padding: 0 24rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #fff;
	}

	.item image {
		width: 64rpx;
		height: 64rpx;
		margin-right: 30rpx;
		border-radius: 100%;
	}

	.item>view {
		flex: 1;
		/* height: 124rpx; */
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: solid 1rpx #efefef;
		 
	}

	.item>view>view:nth-child(1) {
		height: 124rpx;
		display: flex;
		flex-direction: column; 
		justify-content: space-between;
		padding: 24rpx 0;
	}

	.item>view>view:nth-child(1)>text:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333333;
		max-width: 400rpx;
	}

	.item>view>view:nth-child(1)>text:nth-child(2) {
		font-size: 24rpx;
		letter-spacing: 1rpx;
		color: #333333;
		/* margin-top: 20rpx; */
	}

	.item>view>view:nth-child(2) {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
		font-weight: bold;
	}
</style>
<style>
	page {
		background: #f5f5f5;
	}
</style>
